<script setup lang="js">
import {ref, watch, onMounted, computed} from 'vue'
import {useRoute} from 'vue-router'
import {getBrand} from '@/api/brand.js'
import SingleUpload from "@/components/upload/singleUpload.vue";

const route = useRoute()
// const props = defineProps({
//   isEdit: {
//     type: Boolean,
//     default: false
//   }
// })


onMounted(() => {
  if (route.query.id) {
    getBrand(route.query.id).then(res => {
      brandForm.value = res.data.data
    })
  } else {
    brandForm.value = {
      bigPic: '',
      brandStory: '',
      factoryStatus: 0,
      firstLetter: '',
      logo: '',
      name: '',
      showStatus: 0,
      sort: 0,
    }
  }
})


const form = ref(null)
const brandForm = ref({
  bigPic: '',
  brandStory: '',
  factoryStatus: 0,
  firstLetter: '',
  logo: '',
  name: '',
  showStatus: 0,
  sort: 0
})
const rules = {
  name: [
    { required: true, message: '请输入品牌名称', trigger: 'blur' },
    { min: 2, max: 5, message: '品牌名称长度在 2 到 5 个字符', trigger: 'blur' },
  ],
  logo: [
    {required: true, message: '请输入品牌logo', trigger: 'blur'}
  ],
  sort: [
    {type: 'number', message: '排序必须为数字'}
  ],
}

// TODO: 提交表单
const handleSubmit = (formName) => {
  form.value.validate((valid) => {
    if (valid) {
      console.log(brandForm.value)
      // TODO: 提交表单
      // 1. 发送请求
      // 2. 成功后提示成功信息
      // 3. 关闭弹窗
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
// TODO：重置表单
const resetForm = () => {
  brandForm.value = {
    bigPic: '',
    brandStory: '',
    factoryStatus: 0,
    firstLetter: '',
    logo: '',
    name: '',
    showStatus: 0,
    sort: 0,
  }
}

</script>

<template>
  <div class="brand-detail">
  <el-card style="width: 800px;">
    <el-form ref="form" :model="brandForm" :rules="rules" label-position="right" label-width="150px">
      <el-form-item label="品牌名称：" prop="name">
        <el-input v-model="brandForm.name" placeholder="请输入品牌名称"></el-input>
      </el-form-item>
      <el-form-item label="品牌首字母：">
        <el-input v-model="brandForm.firstLetter"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO：" prop="logo">
                <single-upload v-model="brandForm.logo" ></single-upload>
      </el-form-item>
      <el-form-item label="品牌专区大图：">
                <single-upload v-model="brandForm.bigPic"></single-upload>
      </el-form-item>
      <el-form-item label="品牌故事：">
        <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="brandForm.brandStory"
            :autosize="true"></el-input>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input v-model.number="brandForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio-group v-model="brandForm.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="品牌制造商：">
        <el-radio-group v-model="brandForm.factoryStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit('brandFrom')">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  </div>
</template>

<style scoped>
.brand-detail {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.el-card {
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

</style>
